<template>
    <topMenu ref="rightMenuRef"></topMenu>
    <div class="login-box flex align-center justify-center">
        <div class="flex-sub">
            <el-form :model="formData" label-width="0">
                <el-form-item v-if="setPwType==='forget'" label="">
                    <el-input v-model="formData.mobile" placeholder="手机号（必填，11位数字）"/>
                </el-form-item>
                <el-form-item label="">
                    <div class="flex">
                        <el-input v-model="captcha" class="margin-right-5" placeholder="图形验证码"/>
                        <captchaTemp ref="captchaTempRef"></captchaTemp>
                    </div>
                </el-form-item>
                <el-form-item label="">
                    <div class="flex">
                        <el-input v-model="formData.sms_code" class="margin-right-5" placeholder="短信验证码"/>
                        <el-button type="primary" @click="sendCode">发送验证码</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="formData.password" placeholder="输入密码" show-password/>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="formData.password_confirmation" placeholder="确认密码" show-password/>
                </el-form-item>
                <el-form-item>
                    <el-button style="width:100%" type="primary" @click="onSubmit">确认</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup="">
    import _ from 'lodash';
    import captchaTemp from '../../components/captchaTemp.vue'
    import topMenu from '../../components/topMenu.vue'

    import {useRoute, useRouter} from "vue-router";
    import {reactive, ref} from "vue";
    import {ElMessage} from "element-plus";
    import {forgetPassword, forgetPasswordSMS, modifyPassword, modifyPasswordSMS} from "../../http/user";
    import {setToken} from "../../plugins/cookie";

    const route = useRoute()
    const router = useRouter()

    const setPwType = route.query.type

    const formData = reactive({
        sms_code: '',
        mobile: '',
        password: '',
        password_confirmation: ''
    })
    const captcha = ref('')
    const captchaTempRef = ref('')

    //发送验证码
    const sendCode = () => {
        if (!captcha.value) {
            ElMessage.error('请先输入图形验证码')
            return;
        } else {
            let paramsData = {
                mobile: formData.mobile,
                captcha: captcha.value,
                key: captchaTempRef.value.captchaKey
            }
            if (setPwType === 'edit') {
                //修改密码
                modifyPasswordSMS(paramsData).then(res => {
                    console.log("res", res)
                    const {code} = res
                    if (code === 0) {
                        ElMessage({
                            message: '短信发送成功',
                            type: 'success',
                        })
                    }
                })
            }
            if (setPwType === 'forget') {
                //忘记密码
                forgetPasswordSMS(paramsData).then(res => {
                    console.log("res", res)
                    const {code} = res
                    if (code === 0) {
                        ElMessage({
                            message: '短信发送成功',
                            type: 'success',
                        })
                    }
                })
            }
        }
    }

    //确认提交
    const onSubmit = (() => {
        let paramsData = JSON.parse(JSON.stringify(formData));
        console.log("paramsData",paramsData)
        if (setPwType === 'edit') {
            paramsData = _.omit(formData, ['mobile']);
            console.log("123", paramsData)
            modifyPassword(paramsData).then(res => {
                const {code} = res
                if (code === 0) {
                    ElMessage({
                        message: '修改成功,返回登录',
                        type: 'success',
                    })
                    setToken('');
                    router.push({
                        path: '/login'
                    })
                }
            })
        }

        if (setPwType === 'forget') {
            forgetPassword(paramsData).then(res => {
                const {code} = res
                if (code === 0) {
                    ElMessage({
                        message: '修改成功,返回登录',
                        type: 'success',
                    })
                    router.push({
                        path: '/login'
                    })
                }
            })
        }


    })

</script>

<style lang="scss" scoped>
  @import "@/assets/css/variables.scss";

  .login-box {
    height: 100vh;
    width: 280px;
    margin: 0 auto;
  }
</style>
